<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册与列表展示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        .user-form {
            margin-bottom: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="user-form">
            <label for="username">用户名：</label>
            <input type="text" id="username" v-model="newUser.username" required>

            <label for="password">密码：</label>
            <input type="password" id="password" v-model="newUser.password" required>

            <label for="nickname">昵称：</label>
            <input type="text" id="nickname" v-model="newUser.nickname">

            <label for="gender">性别：</label>
            <select id="gender" v-model="newUser.gender">
                <option value="male">男</option>
                <option value="female">女</option>
                <option value="other">其他</option>
            </select>

            <label for="province">省份：</label>
            <select id="province" v-model="newUser.province" @change="shi">
                <option v-for="province in provinces" :key="province" :value="province">{{ province }}</option>
            </select>

            <label for="city">城市：</label>
            <select id="city" v-model="newUser.city" @change="Districts">
                <option v-for="city in cities" :key="city" :value="city">{{ city }}</option>
            </select>

            <label for="district">地区：</label>
            <select id="district" v-model="newUser.district">
                <option v-for="district in districts" :key="district" :value="district">{{ district }}</option>
            </select>

            <label>兴趣爱好：</label>
            <div v-for="(hobby, index) in hobbies" :key="index">
                <input type="checkbox" :value="hobby" v-model="newUser.selectedHobbies">
                {{ hobby }}
            </div>

            <button @click="addUser">注册</button>
        </div>

        <table>
            <thead>
                <tr>
                    <th>用户名</th>
                    <th>昵称</th>
                    <th>性别</th>
                    <th>城市</th>
                    <th>兴趣爱好</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user, index) in users" :key="index">
                    <td>{{ user.username }}</td>
                    <td>{{ user.nickname }}</td>
                    <td>{{ user.gender }}</td>
                    <td>{{ user.province + ' ' + user.city + ' ' + user.district }}</td>
                    <td>{{ user.selectedHobbies.join(', ') }}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        const vm = new Vue({
            el: "#app",
            data: {
                newUser: {
                    username: '',
                    password: '',
                    nickname: '',
                    gender: '',
                    province: '',
                    city: '',
                    district: '',
                    selectedHobbies: []
                },
                users: [],
                provinces: ['广东省', '湖南省', '四川省'],
                cities: [],
                districts: [],
                hobbies: ['阅读', '旅行', '运动', '音乐']
            },
            methods: {
                addUser() {
                    this.users.push({ ...this.newUser });
                    this.newUser = {
                        username: '',
                        password: '',
                        nickname: '',
                        gender: '',
                        province: '',
                        city: '',
                        district: '',
                        selectedHobbies: []
                    };
                },
                shi() {
                    if (this.newUser.province === '广东省') {
                        this.cities = ['广州市', '深圳市', '珠海市'];
                    } else if (this.newUser.province === '湖南省') {
                        this.cities = ['长沙市', '株洲市', '湘潭市'];
                    } else if (this.newUser.province === '四川省') {
                        this.cities = ['成都市', '绵阳市', '泸州市'];
                    } else {
                        this.cities = [];
                    }

                    this.newUser.city = '';
                    this.newUser.district = '';
                    this.districts = [];
                },
                Districts() {
                    if (this.newUser.city === '广州市') {
                        this.districts = ['天河区', '越秀区', '海珠区'];
                    } else if (this.newUser.city === '深圳市') {
                        this.districts = ['南山区', '福田区', '龙岗区'];
                    } else if (this.newUser.city === '珠海市') {
                        this.districts = ['香洲区', '金湾区', '斗门区'];
                    } else if (this.newUser.city === '长沙市') {
                        this.districts = ['岳麓区', '天心区', '芙蓉区'];
                    } else {
                        this.districts = [];
                    }
                },

            }
        });
    </script>
</body>

</html>